<template>
  <dialog class="contract-box" v-if="data.isVisible">
    <view class="popup-title flex">
      <view class="cancle" @click="close"> 取消</view>
      <view class="title">
        变更抄送人
      </view>
      <view class="sure"></view>
    </view>

    <u-form labelPosition="left" :model="data" ref="contractFormRef">
      <view class="main p-l-r-32 bg-color">
        <u-form-item label="抄送人" prop="name" labelWidth="100" class="">
        </u-form-item>

        <scroll-view scroll-y="true" style="widht:100%;min-height: 200rpx; max-height: 550rpx;">
          <view class="sign-border" v-if="data.recipient_members.length > 0">
            <view class="flex sign" :class="'active'" v-for="(item,index) in data.recipient_members"
                  :key="index">
              <view class="list">
                <view>
                  <image src="../static/images/preson-icon.png"></image>
                </view>
                <view>
                  <view class="flex">
                  </view>
                  <text>{{ item.label }}</text>
                </view>
              </view>
              <view class="small-close">
                <u-icon name="close" color="#fff" size="16" @click="memberPageObj.delete(index)"></u-icon>
              </view>
              <view class="tag">抄送人</view>
            </view>
          </view>
        </scroll-view>
        <view class="flex">
          <view class="flex" style="padding-bottom: 16rpx;" @click="memberPageObj.open()">
            <u-icon name="plus-circle" color="#4787F0" size="18"></u-icon>
            <text class="font-color font-size-28" style="padding-left: 10rpx;font-weight: 500;">添加抄送人</text>
          </view>
        </view>
      </view>
      <view class="edit-bottom-button">
        <u-button type="primary" text="保存" class="custom-style"
                  @click="submit()"
                  iconColor=""
                  :customStyle="{
                    borderRadius:'0rpx',
                    border:'none',
                    padding:'8rpx',
                    height:'100rpx',
                    lineHeight: '100rpx'
                  }"></u-button>
      </view>
    </u-form>
    <!-- 底部按钮 -->

    <member-page ref="memberPageRef" @return-member="memberPageObj.returnMember"></member-page>
  </dialog>
</template>
<script setup>
import MemberPage from "../components/member-page.vue";

import {
  defineEmits,
  reactive,
  ref
} from 'vue'

import {
  membercontractDetail
} from "../api/module/contract.js"

import {
  inObject,
  arrayFilter,
  msg, arrayPluck,
} from "../utils/common.js"
import UFormItem from "../uni_modules/uview-plus/components/u-form-item/u-form-item.vue";
import {recipientUserStore} from "../api/module/common";

const emit = defineEmits(['returnFun']);

const data = reactive({
  isVisible: ref(false),
  recipient_members: [],
  contract_id: 0,
  detail: {},
});

// 抄送人选择
const memberPageRef = ref(null);
const memberPageObj = reactive({
  open: () => {
    memberPageRef.value.open();
  },
  delete: (index) => {
    data.recipient_members = arrayFilter(data.recipient_members, index);
  },
  returnMember: (memberData) => {
    if (inObject(data.recipient_members, 'id', memberData.id)) {
      return msg('抄送人已添加');
    }
    data.recipient_members.push(memberData);
  },
});

const close = () => {
  data.isVisible = false;
}

const open = (id) => {
  data.contract_id = id;
  data.isVisible = true;
  membercontractDetail({
    member_contract_id: data.contract_id
  }).then(res => {
    data.detail = res;
    data.recipient_members = res.recipient_members;
  })
}

const submit = () => {
  emit('returnFun', data.detail);
  var memberIds = arrayPluck(data.recipient_members, 'id');

  if (memberIds.length < 1) {
    msg('请选择抄送人');
    return false;
  }

  recipientUserStore({
    member_contract_id: data.contract_id,
    recipient_id: memberIds
  }).then(response => {
    msg(response.message);
    data.isVisible = false;
  });
}

defineExpose({
  open,
});
</script>
<style scoped lang="scss" src="/static/css/contract/initiate.scss"></style>
<style scoped lang="scss">
.contract-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 0;
  border: 1px solid #ccc;
  z-index: 10;
  width: 100%;
  height: 100%;
}

.edit-bottom-button {
  margin-top: 80rpx;
  padding: 10rpx;
}

.popup-title {
  justify-content: space-between;
  font-size: 32rpx;
  font-weight: 400;
  height: 94rpx;
  line-height: 94rpx;
  background: #33252529;
  padding: 0 32rpx;
  box-sizing: border-box;

  .cancle {
    color: rgba(0, 0, 0, 0.6);
  }

  .title {
    font-weight: 600;
    color: rgba(0, 0, 0, 0.9);
  }

  .sure {
    color: #4787f0;
  }
}
</style>